<template>
  <el-dialog
    fullscreen
    :title="title"
    :visible="open"
    append-to-body
    @open="onOpen"
    @close="$emit('close')"
  >
    <div>
      <el-table :data="students" style="width: 100%">
        <el-table-column prop="finishTime" label="交卷时间"> </el-table-column>
        <el-table-column prop="times" label="考试次数">
          <template slot-scope="scope">
            <span>第{{ scope.row.times }}次</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="批阅状态">
          <template slot-scope="scope">
            <div class="student-score" v-if="scope.row.examStatus == 2">
              {{ scope.row.examScore }}分
            </div>
            <div v-else-if="scope.row.examStatus == 1">未批阅</div>
            <div v-else>
              未交卷
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="$emit('close')">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRecordList } from "@/api/cms/exma";
import { mapGetters } from "vuex";

export default {
  props: {
    id: {
      type: String | Number,
      default: ""
    },
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "考试结果"
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  data() {
    return {
      openCheckedModal: false,
      students: [],
      studentId: "",
      scoreId: ""
    };
  },
  created() {},
  methods: {
    onOpen() {
      getRecordList(this.id, { userId: this.userInfo.id }).then(res => {
        this.students = res.data;
        if (res.data.length == 0) {
          this.$message.warning("没有学生参加考试");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    height: calc(100% - 55px - 66px) !important;
  }
}

.exam-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .exam-body {
    flex: 1;
  }
}
.exam-content {
  display: flex;
  align-items: flex-start;
  .exam-content-right {
    width: 200px;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  .exam-content-left {
    flex: 1;
  }
}
.exam-item {
  border: 1rpx solid #bbb;
  .exam-item-title {
    display: flex;
    align-items: center;
  }
  .exam-item-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .exam-item-select {
    display: flex;
    align-items: center;
    width: 250px;
  }
}

.students {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.student-item {
  width: 200px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-right: 10px;
  height: 78px;
  .student-name {
    flex: 1;
    margin-right: 10px;
    color: #333;
    font-weight: bold;
  }
  .student-score {
    color: #000;
    font-weight: bold;
    font-size: 18px;
  }
  .student-btn {
  }
}
</style>
